<template>
  <div id="main" class="clear">
    <div class="top-box">
      <img
        @touchstart="gobacklisteningmain"
        class="left-arrow"
        src="@/assets/书城/shape_u112.png"
        alt
      />
      <img @touchstart="gomask" class="shape-btn" src="@/assets/书城/形状_u1385.png" alt />
    </div>
    <div class="midbox">
      <div class="bookimg">
        <img src="@/assets/书城/mask_u3464.jpg" width="130" height="188" alt />
      </div>
      <p class="bookname">{{bookinfo.name}}</p>
      <p class="booktext">{{bookinfo.text}}</p>
      <p class="booktext">{{bookinfo.copy}}</p>
      <div @touchstart="addbook" class="addbtn" :class="{isadd:isadd}">{{addbooks}}</div>
    </div>
    <div class="bottombox">
      <div class="range">
        <div class="overrange"></div>
        <div class="btnimg">
          <img src="@/assets/书城/oval_2_u3443.png" alt />
        </div>
      </div>
      <div class="readtime">
        <span>{{bookinfo.starttime}}</span>
        <span>{{bookinfo.alltime}}</span>
      </div>
      <div class="playbtn">
        <div>
          <img src="@/assets/书城/路径_u3457.png" alt />
        </div>
        <div @touchstart="goplay" :class="{stop:!isplay,play:isplay}"></div>
        <div>
          <img src="@/assets/书城/路径_u3455.png" alt />
        </div>
      </div>
    </div>
    <div class="point" :class="{pointanimation:isshow}">
      <p>已加入书架</p>
    </div>
    <div class="hidbox" :class="{addhidboxclass:isaddmask}">
      <p class="shapetitle">立即分享给好友</p>
      <div class="linkbox">
        <div>
          <div class="linkimg wximg">
            <img src="@/assets/wechatweibo/u1394.png" alt />
          </div>
          <span>微信</span>
        </div>
        <div>
          <div class="linkimg wbimg">
            <img src="@/assets/wechatweibo/u1397.png" alt />
            <img src="@/assets/wechatweibo/u1398.png" alt />
            <img src alt />
          </div>
          <span>微博</span>
        </div>
        <div>
          <div class="linkimg lkimg">
            <img width="24" height="24" src="@/assets/wechatweibo/u1402.svg" alt />
          </div>
          <span>复制连接</span>
        </div>
        <div>
          <div class="linkimg spimg">
            <img src="@/assets/wechatweibo/u1404.png" alt />
          </div>
          <span>分享海报</span>
        </div>
      </div>
      <hr class="hidboxline" />
      <p class="delbtn" @touchend="isaddmask=false">取消</p>
    </div>
    <div class="mask" :class="{addmaskclass:isaddmask}"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isaddmask: false,
      bookinfo: {
        img: "@/assets/书城/mask_u3464.jpg",
        name: "000素书：中国谋略第一书",
        text: "鬼谷子财商学院【播】",
        copy: "内容由喜马拉雅APP提供",
        alltime: "3:58",
        starttime: "0:00"
      },
      isplay: false,
      isadd: false,
      addbooks: "加入书架",
      isshow: false
    };
  },
  methods: {
    goplay() {
      if (this.isplay == false) {
        this.isplay = true;
      } else {
        this.isplay = false;
      }
    },
    addbook() {
      if (this.isadd == false) {
        this.addbooks = "已加入书架";
        this.isadd = true;
        this.isshow = true;
      } else {
        this.addbooks = "加入书架";
        this.isadd = false;
        this.isshow = false;
      }
    },
    gomask() {
      if (this.isaddmask == false) {
        this.isaddmask = true;
      } else {
        this.isaddmask = false;
      }
    },
    gobacklisteningmain() {
      this.$router.push(
        {
          path: "/listeningbook"
        },
        () => {}
      );
    }
  }
};
</script>

<style lang="less" scoped>
.clear::after {
  content: "";
  display: block;
  clear: both;
}
#main {
  box-sizing: border-box;
  width: 100%;
  .hidbox {
    position: fixed;
    bottom: -100%;
    left: 0;
    z-index: 99;
    box-sizing: border-box;
    width: 100%;
    height: 20.4rem;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border-width: .1rem;
    border-style: solid;
    border-color: rgba(255, 255, 255, 1);
    border-radius: 2rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    .shapetitle {
      font-family: "ArialMT", "Arial";
      font-weight: 400;
      font-style: normal;
      font-size: 1.4rem;
      text-align: center;
      margin-top: 2rem;
      margin-bottom: 2rem;
    }
    .hidboxline {
      margin-top: .8rem;
      margin-bottom: .8rem;
      border: .5rem solid #f2f2f2;
    }
    .delbtn {
      text-align: center;
      font-size: 1.4rem;
      color: #323233;
      font-weight: 400;
    }
    .touchdelbtn {
      background-color: #f2f2f2;
    }
    .linkbox {
      display: flex;
      justify-content: space-evenly;
      div {
        display: flex;
        flex-direction: column;
        align-items: center;
        span {
          font-family: "ArialMT", "Arial";
          font-weight: 400;
          color: #333333;
          font-size: 1.2rem;
        }
        .linkimg {
          margin-bottom: .5rem;
          width: 5rem;
          height: 5rem;
          border-radius: 50%;
        }
        .wximg {
          background: url("@/assets/wechatweibo/u1393.png");
          position: relative;
          img {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
        }
        .wbimg {
          background: url("@/assets/wechatweibo/u1399.png");
          position: relative;
          img {
            position: absolute;
            left: 46%;
            top: 58%;
            transform: translate(-50%, -50%);
            &:last-of-type {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
        .lkimg {
          background: url("@/assets/wechatweibo/u1401.png");
          position: relative;
          img {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
        }
        .spimg {
          background: url("@/assets/wechatweibo/u1401.png");
          position: relative;
          img {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
    }
  }
  .addhidboxclass {
    animation: addhidbox 0.5s linear forwards;
  }
  @keyframes addhidbox {
    0% {
      bottom: -100%;
    }
    100% {
      bottom: 0;
    }
  }
  .mask {
    width: 100%;
    position: fixed;
    background-color: black;
    opacity: 0.5;
    min-height: 100%;
    top: 100%;
    left: 0;
    z-index: 98;
  }
  .addmaskclass {
    animation: addmask 0.5s linear forwards;
  }
  @keyframes addmask {
    0% {
      top: 100%;
    }
    100% {
      top: 0;
    }
  }
  .point {
    width: 13rem;
    height: 10rem;
    border-radius: 1rem;
    background-color: black;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    font-size: 1.8rem;
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 10rem;
  }
  .pointanimation {
    animation: myshow 2s linear forwards;
  }
  @keyframes myshow {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0.25;
    }
    60% {
      opacity: 0.5;
    }
    70% {
      opacity: 0.5;
    }
    80% {
      opacity: 0.5;
    }
    90% {
      opacity: 0.25;
    }
    100% {
      opacity: 0;
    }
  }
  .top-box {
    box-sizing: border-box;
    margin-bottom: 1rem;
    width: 100%;
    height: 1.6rem;
    display: flex;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 1);
    padding: 0 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
    height: 5rem;
    .left-arrow {
      width: .9rem;
      height: 1.4rem;
    }
    .shape-btn {
      width: 1.6rem;
      height: 1.6rem;
    }
  }
  .midbox {
    .bookimg {
      width: 100%;
      text-align: center;
      margin-bottom: 2.5rem;
      margin-top: -1.5rem;
    }
    .bookname {
      width: 21.241rem;
      height: 2.5rem;
      margin: 0 auto;
      font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC";
      font-weight: 650;
      font-style: normal;
      text-align: center;
      font-size: 1.8rem;
      margin-bottom: 1rem;
    }
    .booktext {
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      font-style: normal;
      color: #aeaeae;
      text-align: center;
      font-size: 1.4rem;
      margin-bottom: 1rem;
      &:last-of-type {
        margin-bottom: 2.5rem;
      }
    }
    .addbtn {
      margin: 0 auto;
      background: inherit;
      background-color: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      border-width: .1rem;
      border-style: solid;
      border-color: rgba(242, 242, 242, 1);
      border-radius: .5rem;
      width: 16rem;
      height: 4.5rem;
      line-height: 4.5rem;
      text-align: center;
      font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC";
      font-weight: 650;
      font-style: normal;
      font-size: 1.2rem;
    }
    .isadd {
      font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC";
      font-weight: 650;
      font-style: normal;
      font-size: 1.2rem;
      color: #999999;
    }
  }
}
.bottombox {
  padding: 0 1rem;
  .range {
    width: 100%;
    height: .3rem;
    position: relative;
    margin-top: 5.5rem;
    background-color: rgba(222, 222, 222, 0.549019607843137);
    .overrange {
      width: 50%;
      height: .3rem;
      border-radius: 1rem;
      background-color: rgba(65, 200, 114, 1);
      float: left;
    }
    .btnimg {
      position: absolute;
      width: 3.5rem;
      height: 3.5rem;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 98;
      &::after {
        content: "";
        width: .5rem;
        height: .5rem;
        background-color: rgba(65, 200, 114, 1);
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 99;
      }
    }
  }
  .readtime {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    span {
      font-family: "Helvetica-Light", "Helvetica Light", "Helvetica";
      font-weight: 200;
      font-style: normal;
      font-size: 1rem;
      color: #95a1a6;
      text-align: left;
    }
  }
  .playbtn {
    margin-top: 1rem;
    padding-bottom: 7rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: normal;
    justify-content: space-evenly;
    align-items: center;
    .stop {
      width: 6.5rem;
      height: 6.5rem;
      background: url("@/assets/书城/形状_u3450.png");
      border-radius: 50%;
    }
    .play {
      border-radius: 50%;
      width: 6.5rem;
      height: 6.5rem;
      background: rgba(65, 200, 114, 1);
      position: relative;
      overflow: hidden;
      &::before {
        content: "";
        position: absolute;
        left: 50%;
        right: 50%;
        transform: translate(-50%, 50%);
        margin-top: -0.9rem;
        margin-left: 1.5rem;
        width: 0;
        height: 0;
        border: 2.1rem solid rgba(65, 200, 114, 1);
        border-top-color: rgba(65, 200, 114, 1);
        border-bottom-color: rgba(65, 200, 114, 1);
        border-left-color: white;
        border-right-color: rgba(65, 200, 114, 1);
        z-index: 99;
      }
    }
  }
}
</style>